<template>
    <div class="inter">
        <div style="background: #fff;width: 100%;overflow: hidden;">
            <div class="main">
                <img :src="item.uimg" alt="">
                <div class="item1">
                    <p class="p1">{{item.name}}</p>
                    <p class="p2">ID：{{item.uid}}</p>
                    <p class="p2">开通时间：2018-10-12</p>
                </div>
                <div class="item2">
                    <p class="p2">{{item.agent.name}}</p>
                    <p class="p2">{{item.up_agent}} </p>
                </div>
            </div>
            <div class="main1">
                <div class="item-l">
                    <p class="p2">￥{{item.rebate}}</p>
                </div>
                <div class="item-r">
                    <span :class={up:isUpShow,down:!isUpShow}></span>
                    <p class="p2" @click="switchOrder">查看上级</p>
                    <button class="order" @click="orderDetail(item.uid)">查看订单</button>
                </div>
            </div>
            <transition name="slide-fade">
                <ul class="main_d" v-show="isUpShow">
                    <li>
                        <div v-if="item.top">
                            <p>总代理</p>
                            <p>ID:{{item.top}}</p>
                        </div>
                    </li>
                    <li>
                        <div v-if="item.up3">
                            <p>上三级</p>
                            <p>ID:{{item.up3}}</p>
                        </div>
                    </li>
                    <li>
                        <div v-if="item.up2">
                            <p>上二级</p>
                            <p>ID:{{item.up2}}</p>
                        </div>
                    </li>
                    <li>
                        <div v-if="item.up1">
                            <p>上一级</p>
                            <p>ID:{{item.up1}}</p>
                        </div>
                    </li>
                </ul>
            </transition>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import MemSearchItemTop from '@/components/spread/MemSearchItemTop';

    export default {
        name: `member-list-item-new`,
        props: {
            item: {
                type: Object
            },
            index: {
                type: Number
            }
        },
        components: {MemSearchItemTop},
        data() {
            return {
                isUpShow: false
            };
        },
        created() {
        },
        methods: {
            switchOrder() {
                this.isUpShow = !this.isUpShow;
            },
            orderDetail(uid) {
                // 跳转积分订单详情
                this.$router.push({name: 'memberseclist', query: {uid: uid}});
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .slide-fade-enter-active, .slide-fade-leave-active {
        transition: all 0.2s;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        height: 0
    }

    .slide-fade-enter-to, .slide-fade-leave {
        height: vw(130)
    }

    .p1 {
        word-vw(14, second-ash)
    }

    .p2 {
        word-vw(14, third-ash)
    }

    .main {
        width 100%;
        flex-x();
        padding 0 6vw;
        height: vw(90px);
        background #fff;
        box-sizing: border-box;
        bor-b(#efefef);
        .item1 {
            flex-y();
            flex: 1;
            height 16vw
            align-items flex-start;
            padding-left 3vw
            justify-content space-around
        }

        .item2 {
            flex-y();
            height 16vw
            justify-content space-around;
            align-items flex-end;
            & p {
                line-height 1.2
            }
        }
        & img {
            width: vw(55px)
            height: vw(55px)
        }
    }

    .main1 {
        width 100%;
        flex-x();
        height: vw(40);
        background #fff;
        box-sizing: border-box;
        .item-l {
            width: 30vw
            padding-left 23vw
        }
        .item-r {
            width: 50vw
            flex-x();
            span {
                width: 0
                height: 0
                border-width: 6px;
                border-style: solid;
                &.up {
                    border-color: transparent transparent third-ash transparent;
                    margin-top -6px
                }
                &.down {
                    border-color: third-ash transparent transparent transparent;
                    margin-top 6px
                }
            }
            .order {
                width: vw(94)
                height: vw(40)
                line-height vw(40)
                background main-color
                word-vw(14, white);
            }
        }
        & img {
            width: vw(55px)
            height: vw(55px)
        }
    }

    .button_sp {
        word(14px, #fff);
        background gradient-color;
        height: vw(40px);
        width: vw(83px);
        flex-y();
        justify-content center;
    }

    .button_out {
        flex-x();
        justify-content flex-end
    }

    .main_d {
        li {
            div{
                padding 0 6vw 0 23vw
                flex-x();
                height vw(32px);
                bor-t(bk-color, 1px);
                background bk-color;
                & p {
                    word(14px, #666);
                }
            }
        }
    }

    .space {
        space()
    }

    .inter {
        flex-y();
        box-sizing: border-box;
        width 100%;
        justify-content flex-start
        align-items stretch;
        border-radius 3vw;
    }

    .sort {
        transform: rotate(180deg);
    }

    .icon {
        width: 3vw
    }

    .min_s {
        word(13px, #666)
    }

    .min_sp {
        word(16px, #666)
    }

    .main_t {
        word(16px, #000)
    }
</style>
